import React from 'react';
import PropTypes from 'prop-types';
import {Card, Button, Table, Row, Col} from 'antd';
import {TABLE, DATE_FORMAT} from '../constants';
import {formatAmount, formatDateTime, conventEnumValueToString} from '../utils';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import routes from './routes';
import {getDetail} from './api';
import {partStatus} from '../Enum';
import {injectIntl, formatMessage} from './intl';
import Ellipsis from 'ant-design-pro/lib/Ellipsis';
export class DetailPanel extends React.PureComponent {
    state = {
        data: [],
        loading: false,
    };
    componentDidMount() {
        const {id, conditions = {}} = this.props;
        getDetail({
            orderPlanMonth: conditions.orderPlanMonth,
            orderPlanYear: conditions.orderPlanYear,
            dealerId: id,
        }).then(res => {
            if(res.ok) this.setState({data: res.data.content});
            else this.setState({loading: false});
        });
    }
    render() {
        const columns = [{
            title: formatMessage({
                id: 'detailPanel.column.partCode',
                defaultMessage: '备件编号'
            }),
            dataIndex: 'partCode',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.partName',
                defaultMessage: '备件名称'
            }),
            dataIndex: 'partName',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.engName',
                defaultMessage: '英文名称'
            }),
            dataIndex: 'engName',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.n2Quantity',
                defaultMessage: '计划数量'
            }),
            dataIndex: 'n2Quantity'
        }, {
            title: formatMessage({
                id: 'detailPanel.column.saleQuantity',
                defaultMessage: '订单数量'
            }),
            dataIndex: 'saleQuantity'
        }, {
            title: formatMessage({
                id: 'detailPanel.column.totalFee',
                defaultMessage: '计划金额'
            }),
            dataIndex: 'totalFee',
            render: text => formatAmount(text)
        }, {
            title: formatMessage({
                id: 'detailPanel.column.saleAmount',
                defaultMessage: '订单金额'
            }),
            dataIndex: 'saleAmount',
            render: text => formatAmount(text)
        }, {
            title: formatMessage({
                id: 'detailPanel.column.planComQuantity',
                defaultMessage: '计划符合数量'
            }),
            dataIndex: 'planComQuantity',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.planComAmount',
                defaultMessage: '计划符合金额'
            }),
            dataIndex: 'planComAmount',
            render: text => formatAmount(text)
        }, {
            title: formatMessage({
                id: 'detailPanel.column.planMonthStockQuantity',
                defaultMessage: '计划当月备货数量'
            }),
            dataIndex: 'planMonthStockQuantity',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.planMonthStockAmount',
                defaultMessage: '计划当月备货金额'
            }),
            dataIndex: 'planMonthStockAmount',
            render: text => formatAmount(text)
        }, {
            title: formatMessage({
                id: 'detailPanel.column.planMonthShipmentQuantity',
                defaultMessage: '计划当月发运数量'
            }),
            dataIndex: 'planMonthShipmentQuantity',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.planMonthShipmentAmount',
                defaultMessage: '计划当月发运金额'
            }),
            dataIndex: 'planMonthShipmentAmount',
            render: text => formatAmount(text)
        }, {
            title: formatMessage({
                id: 'detailPanel.column.submitTime',
                defaultMessage: '提报日期'
            }),
            dataIndex: 'submitTime',
            render: text => formatDateTime(text, DATE_FORMAT)
        }, {
            title: formatMessage({
                id: 'detailPanel.column.price',
                defaultMessage: '单价'
            }),
            dataIndex: 'price',
            render: text => formatAmount(text)
        }, {
            title: formatMessage({
                id: 'detailPanel.column.code',
                defaultMessage: '订单号'
            }),
            dataIndex: 'code',
            render: text => <Ellipsis tooltip fullWidthRecognition length={32}>{text}</Ellipsis>
        }, {
            title: formatMessage({
                id: 'detailPanel.column.partStatus',
                defaultMessage: '备件状态'
            }),
            dataIndex: 'partStatus',
            render: text => conventEnumValueToString(partStatus, text)
        }];
        return (
            <div className="detail">
                <Card loading={this.state.loading}>
                    <DescriptionList size="large" title={<Row><Col span={6}>{
                        formatMessage({
                            id: 'detailPanel.card.PlanComsatRate',
                            defaultMessage: '计划符合率和满足率报表详情'
                        })
                    }</Col></Row>}>
                        <Table
                            className="white-space-nowrap"
                            columns={columns}
                            rowKey="id"
                            pagination={false}
                            dataSource={this.state.data}
                            {...TABLE} />
                    </DescriptionList>
                </Card>
                <div className="page-toolbar">
                    <Button
                        type="primary"
                        disabled={this.state.loading}
                        onClick={this.props.onCancel}>{formatMessage({
                            id: 'detailPanel.btn.return',
                            defaultMessage: '返回'
                        })}</Button>
                </div>
            </div>
        );
    }
}

DetailPanel.propTypes = {
    onCancel: PropTypes.func.isRequired
};

import {connect} from 'react-redux';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
const getConditions = selectorFactory(['page', 'appState', 'queryCondition']);
const mapStateToProps = state => ({
    conditions: getConditions(state)
});
const mapDispatchToProps = (dispatch, props) => ({
    onCancel: () => {
        props.history.push(routes.query.url());
    },
});
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(DetailPanel));
